<template>
  <!-- 分配企业记录详情 -->
  <div class="app-container-detail">
    <!-- 功能按钮 -->
    <el-row :gutter="10" class="button-wrap">
      <el-col :span="1.5">
        <el-button icon="el-icon-arrow-left" size="small" @click="handleReturn()">返回</el-button>
      </el-col>
    </el-row>
    <!-- form表单 -->
    <div class="main-content">
      <el-card class="box-card" shadow="never">
        <div slot="header">
          <span>人员记录详情</span>
        </div>
        <div class="main-content-body">
          <div class="detail-item">
            <div class="two-level-title">基本信息</div>
            <table class="detail-table" cellpadding="0" cellspacing="0">
              <tr>
                <td>
                  <span class="labelTitle">人员名称</span>
                </td>
                <td colspan="3">
                  <span class="infoText">{{ formData.userName }}</span>
                </td>
                <td>
                  <span class="labelTitle">人员类型</span>
                </td>
                <td colspan="7">
                  <span class="infoText">{{ formartType(formData.sysUserType) }}</span>
                </td>

              </tr>
              <tr>
                <td>
                  <span class="labelTitle">手机号码</span>
                </td>
                <td>
                  <span class="infoText">{{ formData.phonenumber }}</span>
                </td>
                <td>
                  <span class="labelTitle">身份证号</span>
                </td>
                <td colspan="7">
                  <span class="infoText">{{ formData.proNum }}</span>
                </td>

              </tr>
            </table>
            <div class="two-level-title">巡检记录</div>
            <el-table
              ref="multipleTable"
              v-loading="loading"
              :data="tableData"
              style="width: 100%;"
              height="500px"
              stripe
              class="table-list"
            >
              <el-table-column type="index" label="序号" width="51" align="center" />
              <el-table-column
                prop="rummager"
                label="巡检人员"
                min-width="180"
                align="center"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                prop="worker"
                label="现场人员"
                min-width="130"
                align="center"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                prop="equipment"
                label="现场设备"
                min-width="130"
                align="center"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                prop="verdict"
                label="结论"
                min-width="130"
                align="center"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="{row}">
                  <span v-if="row.verdict === '0'">优秀</span>
                  <span v-if="row.verdict === '1'">良好</span>
                  <span v-if="row.verdict === '2'">较差</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="查看详情" align="center" width="80">
                <template slot-scope="{row}">
                  <i class="el-icon-document magnifier" @click="handleRecordDetail(row.id)" />
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-card>
    </div>
    <detailDialogRecord ref="detailDialogRecord" />
  </div>
</template>
<script>
import { personTypeListNoPermission } from '@/api/superviseBaseInfo/typeManage/personnelType/index'
import { personRecord } from '@/api/projectInspection/PatrolList'
/** 页面组件 */
import detailDialogRecord from './detailDialogRecord'
export default {
  components: {
    detailDialogRecord
  },
  data() {
    return {
      // 全部
      readOnly: true,
      currentProvince: [],
      formData: {
        userName: '',
        sysUserType: '',
        phonenumber: '',
        proNum: ''
      },
      typeOptions: [],
      tableData: [],
      loading: false
    }
  },
  computed: {
    formartType() {
      return (sysUserType) => {
        console.log(sysUserType)
        const item = this.typeOptions.find(item => item.typeNum === sysUserType)
        return item && item.typeName
      }
    }
  },
  mounted() {
    const { proId, row } = this.$route.params
    // 巡检列表
    this.formData = { ...row }
    this.getSupperType()
    this.getRecordList({ proId, userId: row.userId })
  },
  methods: {
    // 获取人员类型
    async getSupperType() {
      const { data: { rows }} = await personTypeListNoPermission()
      this.typeOptions = rows
    },
    getRecordList(params) {
      personRecord(params).then(res => {
        this.tableData = res.data
      })
    },
    // 查询项目立项的详情
    handleRecordDetail(id) {
      this.$refs.detailDialogRecord.handleAdd('记录详情', id)
    },
    /** 单位信息 end*/
    // 返回
    handleReturn() {
      this.$router.go(-1)
    }
  }

}
</script>

<style lang="scss">
</style>

